var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	entry : path.join(__dirname, 'src', 'main.js'),
	output : {
		path : path.join(__dirname, 'dist'),
		filename : 'bundle.js'
	},
	plugins : [
		// 该插件的作用就是把 index.html 打包到你的 bundle.js 文件所属目录
		// 也就是说 bundle 到哪里，index.html 就到哪里
		// 同时这个也会自动在 index.html 中引入 script 引用连接
		// 而且引用的资源名称，也取决于你的 bundle 叫什么
		// 这个插件还可以配置压缩 html 的处理
		new htmlWebpackPlugin({
			template : './index.html'
		})
	],
	devServer : {
		// 配置 webpack-dev-server 的 www 目录
		contentBase : './dist'
	},
	module : {
		rules : [
			{
				test : /\.css$/,
				use : [
					'style-loader',
					'css-loader'
				]
			},
			{
				test : /\.(jpg|png|gif|svg)$/,
				use : [
					'file-loader'
				]
			},
			{
				test : /\.less$/,
				use : [
					'style-loader', 	// 3.根据模块生成 style 节点插入 head 中
					'css-loader', 		// 2.在把 css 转成 Javascript 模块
					'less-loader'		// 1.先把 less 转成 css
				]
			}
		]
	}
}